<template>
	<div class="container">
		<search @search="_search" @input='_input'></search>
		<div class="result">
			<dl class="item" v-for="item in goodsList">
				<dt class="img-contant"><img :src="item.goods_image" alt="" /></dt>
				<dd class="disc">
					<h2 class="title">{{item.goods_name}}</h2>
					<p class="brief">{{item.goods_jingle}}</p>
					<span class="price">{{item.goods_price}}{{item.goods_price}}</span>
				</dd>
			</dl>
		</div>
	</div>
</template>

<script>
	import {mapGetters, mapState, mapActions} from 'vuex';
	import Search from '@/components/search-bar/search-bar'
	export default {
		data() {
			return {
				searchText: ''
			}
		},
		computed: {
			...mapState(['goodsList'])
		},
		methods: {
			...mapActions(['getGoodsListAsyn']),
			_input(val) {
				this.searchText = val;
			},
			_search() {
				var param = {
					text: this.searchText
				}
				this.getGoodsListAsyn(param)
			}
		},
		components: {
			search: Search
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 90px;
		.result {
			padding: 50px 40px;
			.item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 50px;
				.img-contant {
					flex-shrink: 0;
					width: 280px;
					height: 188px;
					margin-right: 30px;
					img {
						display: inline-block;
						width: 100%;
						height: 100%;
					}
				}
				.disc {
					display: flex;
					flex-direction: column;
					width: 360px;
					.title {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 100%;
						height: 44px;
						margin-bottom: 20px;
						line-height: 44px;
						color: #4a4a4a;
						font-size: 32px;
					}
					.brief {
						overflow: hidden;
						height: 68px;
						margin-bottom: 20px;
						color: #9b9b9b;
						font-size: 24px;
						line-height: 34px;
					}
					.price {
						font-size: 24px;
						color: #EF364E;
					}
				}
			}
		}
	}
</style>